<template>
	<view>
		<view class="top-list">
			<view class="title-layout" v-for="(item, index) in carScreenList" :key="index">

				<u-line color="#efefef" :customStyle="{'display': 'block',}"></u-line>

				<view class="title-layout-hori">
					<text class="title">{{item.name}}</text>

					<text class="right" style="color: #1573FF;" v-if="'carBrand'==item.type" @click="goBrand">更多</text>
				</view>

				<view style="display: flex;flex-wrap: wrap;">
					<text class="item-text" v-for="(titem, tindex) in item.childList" :key="tindex"
						:style="{'border':titem.check?'#1573FF solid 1rpx':'#cecece solid 1rpx','color':titem.check?'#1573FF':'#a7a7a7'}"
						@click="itemClick(item, titem)">{{titem.value}}</text>
				</view>

			</view>



		</view>

		<view class="title-layout" v-if="'orderScreening'==type">

			<u-line color="#efefef" :customStyle="{'display': 'block',}"></u-line>

			<view class="title-layout-hori">
				<text class="title">提单时间区间</text>
			</view>

			<view style="display: flex;align-items: center;margin-left: 20rpx;padding-bottom: 20rpx;">

				<text class="time-text"
					@click="pickerShow(1)">{{startTime==null||startTime==''?'开始时间':startTime}}</text>
				<text style="margin: 0 15rpx;color: #a7a7a7;">—</text>
				<text class="time-text" @click="pickerShow(2)">{{endTime==null||endTime==''?'结束时间':endTime}}</text>

			</view>

		</view>

		<view class="title-layout" v-if="'orderScreening'==type">

			<u-line color="#efefef" :customStyle="{'display': 'block',}"></u-line>

			<view class="title-layout-hori" @click="goselChannel">
				<text class="title">渠道商</text>

				<text
					class="right">{{selChannel.channelName==null||selChannel.channelName==''?'不限':selChannel.channelName}}</text>

				<u-icon name="arrow-right"></u-icon>
			</view>

		</view>

		<view class="title-layout" v-if="'applyType'!=type&&'allotCar'!=type">

			<u-line color="#efefef" :customStyle="{'display': 'block',}"></u-line>

			<view class="title-layout-hori" @click="goselDept">
				<text class="title">车辆归属</text>

				<text class="right">{{deptName==null||deptName==''?'不限':deptName}}</text>

				<u-icon name="arrow-right"></u-icon>
			</view>

		</view>

		<view style="height: 115rpx;"></view>

		<view class="bottom">
			<text style="flex: 1;color: #333;background-color: #cecece;border: 1rpx solid #a7a7a7;"
				@click="reset">重 置</text>
			<text @click="commit">提 交</text>

		</view>

		<!-- 开始时间 -->
		<u-datetime-picker
		 v-model="value1" :maxDate="value2"
		 :show="startTimeShow" mode="date" @confirm="timeconfirm" @cancel="startTimeShow=false">
		</u-datetime-picker>

		<!-- 结束时间 -->
		<u-datetime-picker
		 v-model="value2" :minDate="value1"
		 :show="endTimeShow" mode="date" @confirm="timeconfirm" @cancel="endTimeShow=false">
		</u-datetime-picker>

		<!-- 车辆归属 -->
		<gljyDataPicker class="deptPicker" ref="picker" :idkey="'deptId'" :isSuper="true" namekey="deptName"
			:childrenkey="'subDeptList'" :title="'请选择'" :initList="deptList" @itemOnclick="itemOnclickDept">
		</gljyDataPicker>

	</view>
</template>

<script>
	import gljyDataPicker from "@/components/gljy-data-picker/gljy-data-picker.vue";

	export default {
		components: {
			gljyDataPicker
		},
		data() {
			return {
				value1:Number(new Date()),
				value2:Number(new Date())+12*30*24*3600*1000,
				type: '',//页面来源
				carScreenList: [],
				startTimeShow: false,
				endTimeShow: false,
				timeType: 0,
				//车辆归属
				deptList: [],
				//选择的数据
				selBrandList: [],
				startTime: '',
				endTime: '',
				selChannel: {
					channelName: ''
				},
				deptName: '',
				deptId: '',
			}
		},
		methods: {
			//跳转选择更多品牌
			goBrand() {
				//不用传当前选择到下个页面，用store里的值就行
				uni.navigateTo({
					url: '/pagesB/screen/brand-list'
				})
			},

			//获取车辆归属数据
			getDeptList() {
				this.$u.api.getCommonDeptlist({
					type: '2'
				}).then(res => {
					this.deptList = res;
				})
			},

			//条件条目点击事件
			itemClick(item, titem) {
				if ('carBrand' == item.type) {
					//车辆品牌是多选

					titem.check = !titem.check


					console.log('点击了', titem.check);

				} else {
					//其他是单选

					item.childList.forEach(e => {
						if (e.id == titem.id) {
							e.check = !e.check
						} else {
							e.check = false
						}
					})

					console.log('点击了222', titem.check);
				}

				this.$forceUpdate()
				
				let that = this
				
				this.selBrandList = []
				
				//同步selBrandList数据
				that.$store.state.params.filterCondition.forEach(item => {
					if ('carBrand' == item.type) {
						item.childList.forEach(citem => {
							if(citem.check){
								that.selBrandList.push(citem)
							}
				
						})
					}
				})
				
				
			},

			//显示时间控件
			pickerShow(type) {
				this.timeType = type;
				switch (this.timeType) {
					case 1:
						this.startTimeShow = true;
						break
					case 2:
						this.endTimeShow = true;
						break
				}
			},

			//选择时间
			timeconfirm(e) {

				console.log('点击确认了', e);
				let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				console.log('格式化后', timeStr);

				if (this.timeType == 1) {
					this.startTimeShow = false;
					this.startTime = timeStr;
				} else if (this.timeType == 2) {
					this.endTimeShow = false;
					this.endTime = timeStr;
				}
			},

			//选择渠道商
			goselChannel() {
				uni.navigateTo({
					url: '/pagesA/channel/sel-channel?type=2'
				})
			},

			//选择车辆归属
			goselDept() {
				this.$refs.picker._show();
			},

			//车辆归属选择回调事件
			itemOnclickDept(res) {
				this.deptName = res.deptName;
				this.deptId = res.deptId;
			},

			//重置
			reset() {
				this.selBrandList = []

				this.carScreenList.forEach(item => {
					item.childList.forEach(citem => {
						citem.check = false;
					})
				})
				
				this.startTime = ''
				this.endTime=''
				this.selChannel={
					channelName: ''
				}
				this.deptName=''
				this.deptId=''
				
				this.$store.commit("params/screenData", {
					selBrandList:this.selBrandList,
					startTime:this.startTime,
					endTime:this.endTime,
					selChannel:this.selChannel,
					deptName:this.deptName,
					deptId:this.deptId,
				});
			},
			
			//移除某一项
			removeOne(){
				
			},
			
			//提交条件
			commit(){
				// uni.$emit('screenData',{
				// 	selBrandList:this.selBrandList,
				// 	startTime:this.startTime,
				// 	endTime:this.endTime,
				// 	selChannel:this.selChannel,
				// 	deptName:this.deptName,
				// 	deptId:this.deptId,
				// })
				
				this.$store.commit("params/screenData", {
					selBrandList:this.selBrandList,
					startTime:this.startTime,
					endTime:this.endTime,
					selChannel:this.selChannel,
					deptName:this.deptName,
					deptId:this.deptId,
				});
				
				uni.navigateBack()
			},

		},
		onLoad(op) {
			//获取车辆归属数据
			this.getDeptList();
			
			//收到页面清除所有
			uni.$on('clearAll', res=>{
				this.reset()
			})
			
			//收到页面清除单项
			uni.$on('clearOne', res=>{
				console.log('收到清除单项', res);
				
				switch(res.typeName[0]){
					case 'carBrand':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('carBrand' == item.type) {
								item.childList.forEach(citem => {
									if (res.value[0] == citem.code) {
										citem.check = false;
									}
						
								})
							}
						})
					break
					case 'screeningCriteriaCarStatus':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('screeningCriteriaCarStatus' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'screeningCriteriaOverdueDays':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('screeningCriteriaOverdueDays' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'screeningCriteriaDaysBeyondOrNear':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('screeningCriteriaDaysBeyondOrNear' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'warehouse':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('warehouse' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'illegalNumber':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('screeningCriteriaPendingViolationNumber' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'illegalScore':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('screeningCriteriaPendingViolationPointsDeducted' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'orderSortType':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('orderSortType' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'placeOrderType':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('placeOrderType' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'applyType':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('applyType' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'rentType':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('screeningCriteriaLeaseType' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'statusKey':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('screeningOrderCarStatus' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'illegalAmount':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('screeningCriteriaPendingViolationAmountOfFine' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'screeningCriteriaReminders':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('screeningCriteriaReminders' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'offlineTime':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('screeningCriteriaOfflineDuration' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'screeningCriteriaALarmType':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('screeningCriteriaALarmType' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'screeningCriteriaUntreatedDuration':
						//收到回调后同步到当前页面
						this.carScreenList.forEach(item => {
							if ('screeningCriteriaUntreatedDuration' == item.type) {
								item.childList.forEach(citem => {
									citem.check = false;
								})
							}
						})
					break
					case 'orderCreateStartTime':
						
						this.startTime = ''
						this.endTime=''
					break
					case 'channelId':
						this.selChannel={
							channelName: ''
						}
					break
					case 'deptId':
						this.deptName=''
						this.deptId=''
					break
				}
				
				this.selBrandList = []
				
				//同步selBrandList数据
				this.$store.state.params.filterCondition.forEach(item => {
					if ('carBrand' == item.type) {
						item.childList.forEach(citem => {
							if(citem.check){
								this.selBrandList.push(citem)
							}
				
						})
					}
				})
				
				this.$store.commit("params/screenData", {
					selBrandList:this.selBrandList,
					startTime:this.startTime,
					endTime:this.endTime,
					selChannel:this.selChannel,
					deptName:this.deptName,
					deptId:this.deptId,
				});
				
			})

			//更多品牌选择后的回调
			uni.$on('selBrand', res => {
				console.log('接到品牌数据了', res);
				this.selBrandList = res

				//收到回调后同步到当前页面
				this.carScreenList.forEach(item => {
					if ('carBrand' == item.type) {
						item.childList.forEach(citem => {

							citem.check = false;

							if (!uni.$u.test.isEmpty(res)) {
								res.forEach(e => {
									if (e.code == citem.code) {
										citem.check = true;
									}
								})
							}

						})
					}
				})
			})

			//渠道商选择后的回调
			uni.$on('selChannel', res => {
				//收到选择的渠道商了
				this.selChannel = res
			})

			this.type = op.type
			this.startTime = op.startTime
			this.endTime = op.endTime

			this.carScreenList = []
			let showList = []

			switch (this.type) {
				case 'RenewalInsurance': //待续保车辆、待年检车辆、待保养车辆
					showList = ['carBrand', 'screeningCriteriaCarStatus', 'screeningCriteriaDaysBeyondOrNear', 'warehouse']
					break
				case 'carScreening': //车辆
					showList = ['carBrand', 'screeningCriteriaReminders', 'warehouse']
					break
				case 'TrafficViolation': //违章车辆
					showList = ['carBrand', 'screeningCriteriaCarStatus', 'screeningCriteriaPendingViolationNumber',
						'screeningCriteriaPendingViolationPointsDeducted',
						'screeningCriteriaPendingViolationAmountOfFine', 'warehouse'
					]
					break
				case 'N_GpsOff': //GPS离线
					showList = ['screeningCriteriaCarStatus', 'screeningCriteriaLeaseType',
						'screeningCriteriaOfflineDuration', 'warehouse'
					]
					break
				case 'N_RailWarn': //围栏报警
					showList = ['screeningCriteriaCarStatus', 'screeningCriteriaLeaseType',
						'screeningCriteriaUntreatedDuration', 'screeningCriteriaALarmType', 'warehouse'
					]
					break
				case 'Refundwarn': //退款提醒
					showList = ['screeningCriteriaCarStatus', 'screeningCriteriaLeaseType',
						 'warehouse'
					]
					break
				case 'N_RentDue': //租赁到期
					showList = ['carBrand', 'screeningCriteriaLeaseType', 'screeningCriteriaOverdueDays', 'warehouse']
					break
				case 'N_OverDue': //逾期欠款
					showList = ['screeningCriteriaCarStatus', 'screeningCriteriaLeaseType', 'warehouse']
					break
				case 'orderScreening': //订单列表
					showList = ['carBrand', 'screeningCriteriaLeaseType', 'orderSortType', 'placeOrderType',
						'screeningOrderCarStatus', 'warehouse'
					]
					break
				case 'applyType': //审批类型
					showList = ['applyType']
					break
				case 'allotCar': //车辆
					showList = ['carBrand', 'warehouse']
					break
			}

			let that = this;

			//根据不同页面来源，组装列表数据
			that.$store.state.params.filterCondition.forEach(item => {

				showList.forEach((e) => {

					if (item.type == e) {
						that.carScreenList.push(item)
					}
				})
			})
			
			let originData = this.$store.state.params.screenData
			this.startTime = originData.startTime
			this.endTime = originData.endTime
			this.selChannel = originData.selChannel
			this.deptName = originData.deptName
			this.deptId = originData.deptId

		},

	}
</script>

<style lang="scss" scoped>
	.top-list {}

	.title-layout {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;


		.title {
			font-size: 28rpx;
			color: #333;
			flex: 1;
		}

		.right {
			color: #a7a7a7;
			font-size: 28rpx;
		}
	}

	.title-layout-hori {
		display: flex;
		align-items: center;
		height: 90rpx;
	}


	.bottom {
		position: fixed;
		left: 0;
		right: 0;
		height: 100rpx;
		bottom: 0;
		padding: 0 10rpx;
		z-index: 999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			flex: 2;
			margin: 0 10rpx;
			height: 78rpx;
			line-height: 78rpx;
			border-radius: 50rpx;
			background-color: $blue15;
			color: white;
			text-align: center;
			font-size: 30rpx;
		}
	}

	.time-text {
		color: #a7a7a7;
		width: 150rpx;
		line-height: 40rpx;
		text-align: center;
		border: 1rpx solid #cecece;
		font-size: 22rpx;
	}

	.item-text {
		color: #a7a7a7;
		font-size: 24rpx;
		line-height: 45rpx;
		width: 200rpx;
		text-align: center;
		border: #cecece solid 1rpx;
		border-radius: 6rpx;
		margin: 0 15rpx 20rpx;
		white-space: nowrap;
		overflow: hidden;
	}

	.deptPicker {
		position: fixed;
		z-index: 9999;
	}
</style>
